<form (ngSubmit)="submit()" [formGroup]="exportForm">
  <header>
    <div class="left">
      <button type="button" routerLink="/tabs/settings">
        <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
        <span>{{ "back" | i18n }}</span>
      </button>
    </div>
    <h1 class="center">
      <span class="title">{{ "exportVault" | i18n }}</span>
    </h1>
    <div class="right">
      <button type="submit" [disabled]="!exportForm.enabled">
        {{ "submit" | i18n }}
      </button>
    </div>
  </header>
  <main tabindex="-1">
    <app-callout type="warning" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
      {{ "personalVaultExportPolicyInEffect" | i18n }}
    </app-callout>
    <app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout>

    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="format">{{ "fileFormat" | i18n }}</label>
          <select id="format" name="Format" formControlName="format">
            <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
          </select>
        </div>
        <app-user-verification ngDefaultControl formControlName="secret" name="Secret">
        </app-user-verification>
      </div>
      <div id="confirmIdentityHelp" class="box-footer">
        <p>{{ "confirmIdentity" | i18n }}</p>
      </div>
    </div>
  </main>
</form>
